<template>
  <view class="advice-container">
    <!-- 顶部标题 -->
    <view class="page-header">
      <text class="page-title">咨询与建议</text>
    </view>
    
    <!-- 分类标签 -->
    <view class="category-tabs">
      <scroll-view scroll-x class="tabs-scroll" show-scrollbar="false">
        <view 
          v-for="(tab, index) in categoryTabs" 
          :key="index"
          class="tab-item"
          :class="{ active: currentTab === index }"
          @click="switchTab(index)"
        >
          <text>{{ tab }}</text>
        </view>
      </scroll-view>
    </view>
    
    <!-- 轮播图 -->
    <view class="banner-section" v-if="currentTab === 0">
      <swiper class="banner-swiper" circular autoplay interval="5000" duration="500" indicator-dots>
        <swiper-item v-for="(banner, index) in banners" :key="index">
          <image :src="banner.image" mode="aspectFill" class="banner-image" @click="goToDetail(banner)"></image>
          <view class="banner-title">{{ banner.title }}</view>
        </swiper-item>
      </swiper>
    </view>
    
    <!-- 最新资讯 -->
    <view class="news-section">
      <view class="section-title">最新资讯</view>
      <view class="news-list">
        <view class="news-item" v-for="(item, index) in filteredNews" :key="index" @click="goToDetail(item)">
          <image :src="item.image" mode="aspectFill" class="news-image"></image>
          <view class="news-content">
            <view class="news-title">{{ item.title }}</view>
            <view class="news-info">
              <text class="news-date">{{ item.date }}</text>
              <text class="news-read">{{ item.readCount }}分钟阅读</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 健康建议 -->
    <view class="health-section" v-if="currentTab === 0 || currentTab === 3">
      <view class="section-title">健康建议</view>
      <view class="health-list">
        <view class="health-item" v-for="(item, index) in healthAdvice" :key="index" @click="goToDetail(item)">
          <image :src="item.image" mode="aspectFill" class="health-image"></image>
          <view class="health-content">
            <view class="health-title">{{ item.title }}</view>
            <view class="health-info">
              <text class="health-date">{{ item.date }}</text>
              <text class="health-read">{{ item.readCount }}分钟阅读</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 无内容提示 -->
    <view class="empty-tip" v-if="filteredNews.length === 0">
      <image src="/static/images/empty_data.png" mode="aspectFit" class="empty-image"></image>
      <text class="empty-text">暂无相关内容</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 分类标签
const categoryTabs = ref(['全部', '家居清洁', '健康生活', '育儿', '老人护理']);
const currentTab = ref(0);

// 轮播图数据
const banners = ref([
  {
    id: '1',
    title: '夏季家居清洁全攻略',
    image: '/static/images/banner1.jpg',
    category: '家居清洁',
    content: '专业指南帮您轻松应对夏季家居清洁难题'
  },
  {
    id: '2',
    title: '健康饮食新理念',
    image: '/static/images/banner2.jpg',
    category: '健康生活',
    content: '科学饮食，健康生活'
  }
]);

// 资讯数据
const newsData = ref([
  {
    id: '1',
    title: '家居清洁小技巧: 如何有效去除顽固污渍',
    image: '/static/images/news1.jpg',
    date: '2023-06-15',
    readCount: '3',
    category: '家居清洁',
    content: '家居清洁是每个家庭必须面对的日常任务，而顽固污渍往往是最令人头疼的问题之一...'
  },
  {
    id: '2',
    title: '夏季家居防潮指南: 让您的家远离湿气困扰',
    image: '/static/images/news2.jpg',
    date: '2023-06-10',
    readCount: '5',
    category: '家居清洁',
    content: '夏季高温多雨，家居防潮成为一大难题...'
  },
  {
    id: '3',
    title: '空调使用与保养全指南: 延长使用寿命的秘诀',
    image: '/static/images/news3.jpg',
    date: '2023-06-05',
    readCount: '4',
    category: '家居清洁',
    content: '空调是夏季必不可少的电器，正确的使用和保养方法可以有效延长其使用寿命...'
  }
]);

// 健康建议数据
const healthAdvice = ref([
  {
    id: '4',
    title: '老年人居家安全指南: 预防跌倒的实用建议',
    image: '/static/images/health1.jpg',
    date: '2023-06-12',
    readCount: '6',
    category: '老人护理',
    content: '老年人居家安全是家庭关注的重点，特别是预防跌倒...'
  },
  {
    id: '5',
    title: '婴幼儿家居环境布置: 安全与舒适并重',
    image: '/static/images/health2.jpg',
    date: '2023-06-08',
    readCount: '7',
    category: '育儿',
    content: '为婴幼儿创造一个安全、舒适的家居环境是每位父母的责任...'
  },
  {
    id: '6',
    title: '室内空气质量改善: 打造健康呼吸环境',
    image: '/static/images/health3.jpg',
    date: '2023-06-03',
    readCount: '5',
    category: '健康生活',
    content: '室内空气质量直接影响家人的健康，特别是对于有呼吸系统疾病的人群...'
  }
]);

// 根据当前标签过滤资讯
const filteredNews = computed(() => {
  if (currentTab.value === 0) {
    return [...newsData.value];
  } else {
    const category = categoryTabs.value[currentTab.value];
    return newsData.value.filter(item => item.category === category);
  }
});

// 切换标签
const switchTab = (index) => {
  currentTab.value = index;
};

// 跳转到详情页
const goToDetail = (item) => {
  uni.navigateTo({
    url: `/pages/advice/detail?id=${item.id}`
  });
};
</script>

<style lang="scss" scoped>
.advice-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

// 顶部标题
.page-header {
  padding: 30rpx;
  background-color: #fff;
  
  .page-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
  }
}

// 分类标签
.category-tabs {
  background-color: #fff;
  padding: 0 20rpx;
  border-bottom: 1px solid #f0f0f0;
  
  .tabs-scroll {
    white-space: nowrap;
    height: 80rpx;
  }
  
  .tab-item {
    display: inline-block;
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 30rpx;
    font-size: 28rpx;
    color: #666;
    position: relative;
    
    &.active {
      color: #ff7a45;
      font-weight: bold;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 4rpx;
        background-color: #ff7a45;
        border-radius: 2rpx;
      }
    }
  }
}

// 轮播图
.banner-section {
  padding: 20rpx;
  
  .banner-swiper {
    height: 300rpx;
    border-radius: 12rpx;
    overflow: hidden;
  }
  
  .banner-image {
    width: 100%;
    height: 100%;
  }
  
  .banner-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20rpx;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
  }
}

// 资讯和健康建议通用样式
.news-section, .health-section {
  margin: 20rpx;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 12rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    position: relative;
    padding-left: 20rpx;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 30rpx;
      background-color: #ff7a45;
      border-radius: 3rpx;
    }
  }
}

// 资讯列表
.news-list, .health-list {
  .news-item, .health-item {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    
    .news-image, .health-image {
      width: 200rpx;
      height: 140rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }
    
    .news-content, .health-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
      .news-title, .health-title {
        font-size: 28rpx;
        color: #333;
        line-height: 1.4;
        margin-bottom: 10rpx;
        // 最多显示两行
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      
      .news-info, .health-info {
        display: flex;
        justify-content: space-between;
        
        .news-date, .health-date, .news-read, .health-read {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
}

// 无内容提示
.empty-tip {
  padding: 100rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

// 适配底部安全区
@supports (bottom: constant(safe-area-inset-bottom)) {
  .advice-container {
    padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
  }
}

@supports (bottom: env(safe-area-inset-bottom)) {
  .advice-container {
    padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
  }
}
</style>